<template>
  <view class="container">
    <navbar title="首页" titleColor="white" :isShowIcon="false"></navbar>
    <view v-if="isClient">
      <view class="header">
        <view class="tabs" @click="onClickTabs">
          <text mark:info="发散货" :class="{active:tabsStatus =='发散货' }">发散货</text>
          <text mark:info="拼散车" :class="{active:tabsStatus =='拼散车' }">拼散车</text>

        </view>
      </view>
      <view class="body">
        <view class="item-box">
          <view class="item">
            <text>姓名</text>
            <view class="item-right">
              <input class="input" v-model="form.username" type="text" placeholder="请输入姓名">
            </view>
          </view>

          <view class="item">
            <text>手机号码</text>
            <view class="item-right">
              <input class="input" v-model="form.phone" type="text" placeholder="请输入手机号码">
            </view>
          </view>
          <view class="item">
            <text>物品类型</text>
            <view class="item-right">
              <input class="input" v-model="form.materialType" type="text" placeholder="请选择物品类型">
              <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
            </view>
          </view>
          <view class="item">
            <text>出发地</text>
            <view class="item-right">
              <input class="input" v-model="form.departure" type="text" placeholder="请输入出发地">
              <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
            </view>
          </view>
          <view class="item">
            <text>目的地</text>
            <view class="item-right">
              <input class="input" v-model="form.destination" type="text" placeholder="请输入目的地">
              <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
            </view>
          </view>
          <view class="item">
            <text>备注信息</text>
            <view class="item-right">
              <input class="input" v-model="form.remark" type="text" placeholder="请输入备注信息">
            </view>
          </view>
        </view>
        <view class="footer" style="margin-top: 140rpx;">
          <FooterBottom @onclick="submit"></FooterBottom>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsStatus: '发散货',
        isClient: true,
        form: {
          type: '1',
          username: '',
          phone: '',
          materialType: '',
          departure: '',
          destination: '',
          remark: '',
        }
      };
    },

    methods: {
      callNumber() {
        uni.makePhoneCall({
          phoneNumber: 19639039090,
          success: () => {
            console.log('拨打电话成功！');
          },
          fail: () => {
            console.error('拨打电话失败！');
          }
        })
      },
      onClickTabs(e) {
        const status = e.mark.info
        this.tabsStatus = status
        this.form = {
          type: status == '发散货' ? '1' : '2',
          username: '',
          phone: '',
          materialType: '',
          departure: '',
          destination: '',
          remark: '',
        }
      },
      gotoOrderDetail() {
        uni.navigateTo({
          url: '/pages/OrderDetail/OrderDetail'
        })
      },
      async submit() {
        for (const key in this.form) {
          if (!this.form[key] && key != 'remark') return uni.showToast({
            title: '请完善表单',
            icon: 'none'
          })
        }
        const res = await uni.gRequest.post('/app/demand/add', this.form)
        console.log(res);
        if (res.msg != '操作成功') return uni.showToast({
          title: '提交失败，请稍后重试！',
          icon: 'none'
        })
        if (res.msg == '操作成功') {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
        }
        this.form = {
          type: '',
          username: '',
          phone: '',
          materialType: '',
          departure: '',
          destination: '',
          remark: '',
        }
      }
    },
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }


  .header1 {
    height: 286rpx;
    background-color: #fd5d29;
  }

  .body1 {
    background-color: white;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -40rpx;
  }

  .container {
    height: 100%;
  }

  .item1 {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time1 {
      padding: 0 0 40rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .contact-people {
      display: block;
      padding: 40rpx 0 20rpx;
      font-size: 32rpx;
      color: #000000;
    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding: 15rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .item-userinfo1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 20rpx;
        color: #999999;

        text:first-child {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
      }
    }
  }

  .middle-image {
    width: 15rpx;
    height: 25rpx;
    margin-left: 13rpx
  }

  .header {
    height: 286rpx;
    background-color: #fd5d29;
    position: relative;
  }

  .tabs {
    position: absolute;
    bottom: 6rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 30rpx;
    color: #FFDBCF;
    height: 100rpx;

    text {
      flex: 1;
      text-align: center;

      &.active {
        color: #FFFFFF;
        position: relative;
        line-height: 70rpx;

        &::after {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 69rpx;
          height: 6rpx;
          background-color: #fff;
          border-radius: 3rpx;
        }
      }
    }
  }

  .body {
    padding: 30rpx;

  }

  .item-box {
    padding: 0 20rpx;
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #eee solid;
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    .item-right {
      position: relative;
      flex: 1;
      // justify-content: flex-end;

      image {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12rpx;
        height: 22rpx;
      }

      .input {
        text-align: right;
        padding: 0 60rpx 0 40rpx;
      }
    }
  }
</style>
